<template>
	<view class="old-diy-goods component-diy" :style="marginStyle">
		<view class="goods-list" :class="componentData.layout" v-if="goods && goods.length > 0">
			<view class="goods" v-for="(item, index) in goods" :key="index">
				<view class="link" @click="toGoodsDetail(item.goods_id)" :style="goodsStyle">
					<view class="img" :style="imagesStyle">
						<image mode="scaleToFill" style="width: 100%; height: 100%;" :src="item.goods_img"></image>
					</view>
					<view class="goods-info">
						<view class="title" :style="nameStyle">{{item.goods_name}}</view>
						<view class="price-cart"
							:class="((componentData.priceStyle > 1 && isMember && item.shop_mem_status == 1 && item.shop_mem_price > 0) || (item.plus_mem_status == 1 && item.plus_price > 0 ))  && (componentData.layout == 'three-per-line' || componentData.layout == 'horizontal-scroll') ? 'multi-line' : ''">
							<view class="prices">
								<template v-if="item.promotion_status == 1">
									<view class="price" :style="{color: componentData.priceColor}">
										<view>￥{{item.act_price}}</view>
									</view>
								</template>
								<template v-else>
									<view class="plusPrice" :style="{color: componentData.plusPriceColor}" v-if="showPlusPrice(item)">
										<i class="iconfont" :class="'left-icon icon-plus' + componentData.plusPriceStyle"
											:style="{color: componentData.plusPriceColor}" v-if="[2, 4, 6].includes(componentData.plusPriceStyle)"></i>
										<view>￥{{item.plus_price}}</view>
										<i class="iconfont" :class="'right-icon icon-plus' + componentData.plusPriceStyle"
											:style="{color: componentData.plusPriceColor}" v-if="[1, 3, 5].includes(componentData.plusPriceStyle)"></i>
									</view>
									<view class="price" :style="{color: componentData.priceColor}" v-if="showVipPrice(item)">
										<i class="iconfont" :class="'left-icon icon-member-price' + (componentData.priceStyle == 2 ? 1 : 2)"
											:style="{color: componentData.priceColor}" v-if="[2, 4].includes(componentData.priceStyle)"></i>
										<view>￥{{item.shop_mem_price}}</view>
										<i class="iconfont" :class="'right-icon icon-member-price' + (componentData.priceStyle == 3 ? 1 : 2)"
											:style="{color: componentData.priceColor}" v-if="[3, 5].includes(componentData.priceStyle)"></i>
									</view>
									<view class="price" :style="{color: componentData.priceColor}" v-if="showOnlinePrice(item)">
										<view>￥{{item.online_price}}</view>
									</view>
								</template>
							</view>
							<view class="cart" v-if="componentData.cart" @click.stop="addToCar(item)">
								<uni-icons :type="iconsType" :color="componentData.cartColor ? componentData.cartColor : ''"
									:size="componentData.layout == 'three-per-line' || componentData.layout == 'horizontal-scroll' ? 16 : 20">
								</uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<view v-else class="noSetting" :style="{backgroundColor:componentData.bgBackgroundColor}">
			商品导航组件参数未设置
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	var app = getApp().globalData;
	export default {
		props: ['componentData'],
		data() {
			return {
				imagesStyle: '',
				goods: []
			};
		},
		computed: {
			marginStyle() {
				let css = {
					'background-color': this.componentData.bgBackgroundColor,
					'margin-top': this.componentData.marginTop + 'px',
					'margin-bottom': this.componentData.marginBottom + 'px',
					'margin-left': this.componentData.marginLR + 'px',
					'margin-right': this.componentData.marginLR + 'px',
					'border-radius': this.componentData.borderRadius + 'px',
					'padding': this.componentData.paddingTRBL + 'px',
				}
				return this.$joinStyle(css);
			},
			goodsStyle() {
				if (!('marginTBCh' in this.componentData)) {
					this.componentData.marginTBCh = 5; //默认边距
				}
				if (!('marginLRCh' in this.componentData)) {
					this.componentData.marginLRCh = 5; //默认边距
				}
				let css = {
					'background-color': this.componentData.backgroundColor,
					'margin-top': this.componentData.marginTCh + 'px',
					'margin-bottom': this.componentData.marginBCh + 'px',
					'margin-left': this.componentData.marginLRCh + 'px',
					'margin-right': this.componentData.marginLRCh + 'px',
					'border-radius': this.componentData.radiusCh + 'px',
				}
				return this.$joinStyle(css);
			},
			nameStyle() {
				let css = {
					'color': this.componentData.nameColor,
				}
				return this.$joinStyle(css);
			},
			iconsType() {
				switch (this.componentData.cartType) {
					case 0:
						return 'cart';
					case 1:
						return 'cart-filled';
					case 2:
						return 'plus';
					case 3:
						return 'plus-filled';
				}
			},
			//是否为会员
			isMember() {
				const userInfo = getApp().globalData.XcxData.userInfo
				if (userInfo.type == 3) {
					return true
				} else {
					return false
				}
			},
			//是否为Plus会员
			isPlus() {
				const userInfo = getApp().globalData.XcxData.userInfo
				if (userInfo.type == 2) {
					return true
				} else {
					return false
				}
			},

		},
		watch: {
			'componentData.ids': {
				async handler() {
					const res = await this.$request('SmallProgramApi/Diy/getRecommendGoods', {
						ids: this.componentData.ids.join(','),
						ids_type: this.componentData.isMerchant ? 1 : 2
					});

					if (res.status == 1) {
						const data = res.data;

						this.goods = data

						this.$nextTick(() => {
							this.updateImagesStyle();
						});
					}
				},
				immediate: true
			},
			componentData: {
				deep: true,
				immediate: true,
				handler() {
					//临时处理旧客户的DIY默认变量 过几个版本后记得删除
					let options = {
						marginTop: 5,
						marginBottom: 5,
						marginLR: 15,
						paddingTRBL: 5,
						borderRadius: 6,
						backgroundColor: 'rgba(255,255,255,1)',
						bgBackgroundColor: 'rgba(255,255,255,1)',
						nameColor: '#333333',
						marginTCh: 8,
						marginBCh: 0,
						marginLRCh: 5,
						radiusCh: 0,
					}
					for (let key in options) {
						if (!(key in this.componentData)) {
							this.componentData[key] = options[key];
						}
					}
				}
			}
		},
		methods: {
			updateImagesStyle() {
				this.$nextTick(() => {
					let view = uni.createSelectorQuery().in(this).select('.link');
					view.boundingClientRect(data => {
						if (!data) return false;
						const css = {
							'width': data.width + 'px',
							'height': data.width + 'px',
							'border-top-left-radius': this.componentData.radiusCh + 'px',
							'border-top-right-radius': this.componentData.radiusCh + 'px',
						};
						this.imagesStyle = this.$joinStyle(css);
					}).exec();
				});
			},
			//进入商品详情
			toGoodsDetail(goodsId) {
				uni.navigateTo({
					url: '/pages/product/details/details?id=' + goodsId,
				})
			},
			addToCar(goods) {
				if (goods.attribute_state == 1) {
					this.$emit('add-to-car',{
						goods_id: goods.goods_id,
						num: 1,
					})
				} else if (goods.attribute_state == 2) {
					this.$emit('get-sku', goods)
				}
			},

			// 展示plus会员价条件
			showPlusPrice(item) {
				return app.showPlusPrice(item)
			},

			// 展示会员价条件
			showVipPrice(item) {
				return app.showVipPrice(item)
			},

			// 展示普通价格
			showOnlinePrice(item) {
				return app.showOnlinePrice(item)
			}

		},
		mounted() {
			if (this.componentData.goods && this.componentData.goods.length > 0) {
				this.goods = this.componentData.goods;
			} else if (this.componentData.isMerchant) {
				// #ifdef H5
				const defaultGoods = {
					goods_id: -1,
					goods_img: '/static/images/example-image.jpg',
					goods_name: '演示商品',
					online_price: 888.88,
					plus_mem_status: 1,
					plus_price: 333.33,
					shop_mem_price: 666.66,
					shop_mem_status: 1
				}
				for (let i = 0; i < 6; i++) {
					this.goods.push(defaultGoods)
				}
				// #endif
			}
		}
	}
</script>

<style lang="less">
	@font-face {
		font-family: 'iconfont';
		src: url('~@/static/iconfont/iconfont.eot');
		src: url('~@/static/iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
			url('~@/static/iconfont/iconfont.woff2') format('woff2'),
			url('~@/static/iconfont/iconfont.woff') format('woff'),
			url('~@/static/iconfont/iconfont.ttf') format('truetype'),
			url('~@/static/iconfont/iconfont.svg#iconfont') format('svg');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-member-price1:before {
		content: "\e60b";
	}

	.icon-member-price2:before {
		content: "\e607";
	}

	.icon-plus1:before,
	.icon-plus2:before {
		content: "\e60c";
	}

	.icon-plus3:before,
	.icon-plus4:before {
		content: "\e609";
	}

	.icon-plus5:before,
	.icon-plus6:before {
		content: "\e608";
	}

	.old-diy-goods {
		overflow: hidden;

		.goods-list {
			display: flex;
			flex-wrap: wrap;

			.goods {
				width: 100%;
				box-sizing: border-box;
				flex-shrink: 0;

				.link {
					margin: 5px;
					background-color: #FFFFFF;
					box-sizing: border-box;
				}

				.img {
					width: 100%;
					overflow: hidden;
				}

				.goods-info {
					padding: 5px 10px 10px 10px;

					.title {
						font-size: 14px;
						max-height: 20px;
						line-height: 20px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						color: #333;
					}

					.price-cart {
						display: flex;
						justify-content: space-between;
						align-items: center;

						&.multi-line {
							flex-wrap: wrap;

							.price,
							.plusPrice {
								width: 100%;
							}

							.cart {
								flex: 1;
								width: 100%;
								text-align: right;
							}
						}

						.prices {
							display: flex;
							flex-direction: column;

							.plusPrice,
							.price {
								margin-top: 5px;
								display: flex;
								align-items: center;

								i {
									font-size: 12px;

									&.right-icon {
										margin-left: 2px;
									}
								}
							}

							.plusPrice {
								font-size: 16px;

								i {
									padding-top: 2px;
								}
							}

							.price {
								font-size: 14px;
							}
						}

						.cart {
							align-self: flex-end;
							margin-bottom: -2px;
							flex-shrink: 0;
							font-size: 16px;
						}
					}
				}
			}

			&.two-per-line,
			&.three-per-line,
			&.horizontal-scroll {
				.goods {
					.goods-info {
						padding: 5px;

						.title {
							font-size: 12px;
							height: 40px;
							max-height: 40px;
							display: -webkit-box;
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							white-space: pre-wrap;
						}

						.price-cart {

							.price,
							.plusPrice {
								font-size: 12px;
							}
						}
					}
				}
			}

			&.two-per-line {
				.goods {
					width: 50%;
				}
			}

			&.three-per-line {
				.goods {
					width: 33.3%;
				}
			}

			&.horizontal-scroll {
				box-sizing: border-box;
				flex-wrap: nowrap;
				width: 100%;
				overflow-x: auto;
				overflow-y: hidden;

				.goods {
					width: 30%;

					.link {
						margin: 5px 3px;
					}

					&:last-child {
						margin-right: 15px;
					}

					// plus价格图标太大，在横排模式下显示不全，略微缩小显示，如果更换图片，可以适当再做调整。
					.goods-info {
						.plusPrice {
							transform: scale(0.95);
							margin-left: -2.5%;
						}
					}
				}
			}
		}
	}

	.noSetting {
		width: 100%;
		height: 100px;
		background-color: #d9d9d9;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22px;
		color: #333;
	}
</style>
